<template>
    <div>
        <div class="header">
            <el-avatar shape="square" :size="100" fit="fill" :src="url"></el-avatar>
            <input type="file" @change="handleImg()">
            <div>
                <el-input v-model="title" placeholder="请输入标题"></el-input>
                <el-input v-model="author" placeholder="请输入作者"></el-input>
            </div>
        </div>
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
        <el-button type="primary" @click="submit">提交</el-button>
    </div>
    
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
const upload = require("@/utils/ckeditorUpload")

export default {
    name: 'editor',
    data(){
        return {
            title:'',
            author: '',
            url: '',
            editor: ClassicEditor,
            editorData: '<p>Content of the editor.</p>',
            editorConfig: {
               language: "zh-cn",
               extraPlugins: [upload.MyCustomUploadAdapterPlugin]
            }
        }
    },
    mounted(){
        this.$Axios({
            url: '/essay/'+ this.$route.params.id,
            method: 'get'
        }).then(res=>{
            this.title = res.data.data.title;
            this.author = res.data.data.author;
            this.editorData = res.data.data.content
            this.url = res.data.data.imageUrl;
        })
    },
    methods:{
        submit(){
            let data = new FormData();
            let file = document.querySelector('input[type=file]').files[0];
            data.append('title',this.title);
            data.append('author',this.author);
            data.append('content', this.editorData);
            data.append('file', file);
            this.$Axios({
                url: '/essay/'+this.$route.params.id,
                method: 'PUT',
                data: data,
            }).then(res=>{
                console.log(res.data);
            }).catch(e=>{
                console.log(e);
            })
        },
        handleImg(){
            let file = document.querySelector('input[type=file]').files[0];
            this.url = window.URL.createObjectURL(file);
        }
    }
}
</script>

<style scoped>
.header{
    display: flex;
    flex-direction: row;
}
</style>